<template>
    <view class="app">
        <load :ready="ready"></load>
			<u-form :model="form" :border-bottom="false" ref="uForm" labelPosition="top" label-width="160">
				<view class="content">
					<view class="title">关键词设置</view>
					<u-form-item label="商品搜索关键词" prop="goodsKeyword" :border-bottom="false">
						<u-input type="text" v-model="form.goodsKeyword" placeholder="手术包、制氧机、雾化器、口罩"></u-input>
					</u-form-item>
					
					<u-form-item label="商品热门搜索关键词" prop="goodsHotKeyword">
						<u-input type="text" v-model="form.goodsHotKeyword" placeholder="手术包、制氧机、雾化器、口罩"></u-input>
					</u-form-item>
				</view>
				
				<view class="content">
					<view class="title">费用设置</view>
					<u-form-item label="售后上门取货跑腿费">
						<u-input type="text" v-model="form.saleRunPrice" placeholder="0"></u-input>
						<text>元</text>
					</u-form-item>
				</view>
				
				<view class="content">
					<view class="title">退货地址设置</view>
					<u-form-item label="收件人" prop="saleContact">
						<u-input type="text" v-model="form.saleContact" placeholder="请输入收件人"></u-input>
					</u-form-item>
					<u-form-item label="手机号码" prop="saleContactNumber">
						<u-input type="text" v-model="form.saleContactNumber"  placeholder="请输入手机号码"></u-input>
					</u-form-item>
					 <!-- prop="saleProvinceName" -->
					<u-form-item label="退货地址">
						<u-input type="select" v-if="form.saleProvinceName" :value="`${form.saleProvinceName}${form.saleCityName}${form.saleDistrictName}`" @click="showCity=true" placeholder="请选择"></u-input>
						<u-input type="select" v-else  @click="showCity=true" placeholder="请选择"></u-input>
					</u-form-item>
					<u-form-item label="详细地址" prop="saleAddress">
						<u-input type="textarea" v-model="form.saleAddress" placeholder="请输入详细地址"></u-input>
					</u-form-item>
				</view>
			</u-form>
			
			<u-gap height="160"></u-gap>
			<view class="btnbox fixed">
				<u-button type="primary" :loading="isLoading" shape="circle" @click="submit()" :custom-style="btnStyle">保存</u-button>
			</view>
		
		
		<city-select ref="citys" v-model="showCity" @city-change="cityChange"></city-select>
		
		<u-picker v-model="showDate" mode="time"></u-picker>
		<u-picker v-model="showDate2" mode="time"></u-picker>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
import ups from '@/components/base/ups.vue';
import citySelect from '@/components/base/u-city-select.vue';

let that;
export default {
    mixins: [mixinsBase],
    components: {
		ups,
		citySelect,
	},
    data() {
        return {
            ready: false,
			showCity: false,
			showDate:false,
			showDate2:false,
			btnStyle: {
				...this.$config.btnStyle,
				width:'100%'
			},
			form:{
			},
			address:{},
			id:null,
			isLoading:false,
			
			rules: {
				goodsKeyword: [{
					required: true,
					message: '请输入商品搜索关键词',
					trigger: ['blur', 'change']
				}],
				goodsHotKeyword: [{
					required: true,
					message: '请输入商品热门搜索关键词',
					trigger: ['blur', 'change']
				}],
				saleContact: [{
					required: true,
					message: '请输入收件人',
					trigger: ['blur', 'change']
				}],
				saleContactNumber: [{
					required: true,
					message: '请输入手机号码',
					trigger: ['blur', 'change']
				},
				// {
				// 	validator: (rule, value, callback) => {
				// 		return this.$u.test.mobile(value);
				// 	},
				// 	message: '手机号码不正确',
				// 	trigger: ['change', 'blur'],
				// },
				],
				saleProvinceName: [{
					required: true,
					message: '请输入退货地址',
					trigger: ['blur', 'change']
				}],
				saleAddress: [{
					required: true,
					message: '请输入详细地址',
					trigger: ['blur', 'change']
				}],
			},
        };
    },
    onLoad(o) {
        that = this;
		
    },
    onReady() {
		this.getInit();
        this.$refs.uForm.setRules(this.rules);
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async submit() {
			console.log('submit')
			let istrue = true
			this.$refs.uForm.validate(valid => {
				console.log(valid);
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
					istrue = false
				}
			});
			console.log('istrue', istrue);
			if (!istrue) return
			this.isLoading = true
			let res = await this.$api.agencyHospitalUpdate({
					...this.form,
					goodsHotKeyword: this.form.goodsHotKeyword.split(','),
					goodsKeyword: this.form.goodsKeyword.split(','),
			});
			this.isLoading = false;
			if (res.data.code == this.$config.RESOK) {
				this.$common.showTip(res.data.msg);
				setTimeout(() => {
					uni.navigateBack()
				}, this.$config.timeLoad);
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getInit() {
			let res = await this.$api.agencyHospitalDetail({
				id: this.userInfo.hospitalId
			});
			if (res.data.code == this.$config.RESOK) {
				let form = res.data.data;
				form.saleContactNumber = '' + form.saleContactNumber;
				if(form.saleContactNumber == 'null'){
					form.saleContactNumber = ''
				}
				form.goodsHotKeyword = '' + form.goodsHotKeyword.join(',');
				form.goodsKeyword = '' + form.goodsKeyword.join(',');
				
				
				this.form = form;
				this.ready = true
				if(this.form.saleProvinceId){
					this.$refs.citys.showInit([this.form.saleProvinceId,this.form.saleCityId,this.form.saleDistrictId])
				}
			} else {
				this.$message.error(res.data.msg);
			}
		},
		cityChange(e) {
		    console.log(e);
			this.form.saleProvinceName = e.province.label;
			this.form.saleProvinceId = e.province.value;
			
			this.form.saleCityName = e.city.label;
			this.form.saleCityId = e.city.value;
			
			this.form.saleDistrictName = e.area.label;
			this.form.saleDistrictId = e.area.value;
			
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page{
	background: #f5f5f5;
}
.app{
	padding: 20rpx 30rpx;
}
.content{
	background: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
	border-radius: 6px;
	.title{
		color: $color;
		font-size: 16px;
		border-left: 3px solid $color;
		margin: 0 -30rpx;
		padding: 0 30rpx;
		height: 18px;
		line-height: 18px;
		font-weight: bold;
	}
}
.form-wrap{
	padding: 20rpx 30rpx;
	.qtext{
		font-size: 14px;
		line-height: 1.6;
	}
}
.item-date{
	position: relative;
	display: flex;
	align-items: center;
}
.icon-date{
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.type-wrap{
	display: flex;
	align-items: center;
	.inp{
		background: #f5f5f5;
		width: 120px;
		padding: 0 5px;
		margin: 0 5px;
	}
}
</style>
